<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始 MVVM分层思想</title>

    <!-- 安装 Vue -->
    <script src="../js/vue.js"></script>
</head>
<body>

    <!-- 
        1.MVVM是什么?
        M:Model (模型/数据)
        V: view(视图)
        VM: View Model (视图模型): VM是 MVVM中的核心部分,(它起一个核心的非常重要的作用)
        MVVM是目前前端开发领域当中非常流行的开发思想(一种架构模式)
        目前前端大部分主流架构都实现了这个MVVM思想,例如:Vue,React等

        2. Vue 框架遵循MVVM吗?
            虽然没有完全遵循MVVM模型,但是Vue的设计也受到了它的启发
            Vue框架基本上也是符合MVVM思想的
        3.MVVM模型当中倡导了Model和View进行分离,为什么要分离?
            假如: Model和View 分离,使用最原始的原生的Javascript代码写项目;
                如果数据发送任意的改动,接下来我们需要编写大篇幅的操作DOM元素的JS代码
            
        将Model和 View 分离之后,出现了一个VM核心,这个VM把所有的脏活和累活给做了.
        也就是说,当Model发生改变之后,VM自动去更新View,当View发生改动之后,
        VM自动去更新Model,我们再也不需要编写操作DOM的JS代码了,开发效率提高了很多.



     -->

     <!-- 准备容器 -->
     <!-- View V -->
     <div id="app">
        姓名: <input type="text" v-model="name">
     </div>
     

     <!-- vue 程序 -->
     <script>
        // View  MOdel VM
        new Vue({
            el : '#app',
            // Model M
            data : {
                name : 'lihua'
            }
        })

     </script>
    
</body>
</html>